let smallObj = document.querySelector(".hiddenbox");

      let maskObj = document.querySelector(".smallbox");

      let bigObj = document.querySelector('.bigbox')

      let bimg =document.querySelector('.bimg');
      console.log(bigObj,bimg);
      
      
      smallObj.onmousemove = function (e) {
        let maxT = smallObj.offsetHeight - maskObj.offsetHeight;
        let maxL = smallObj.offsetWidth - maskObj.offsetWidth;

        let px = e.pageX-150;
        let py = e.pageY-205;

        let maskL = px -maskObj.offsetWidth/2;
        let maskT = py -maskObj.offsetHeight/2;

        if (maskL < 0) {
          maskL = 0;
        }
        if (maskT < 0) {
          maskT = 0;
        }
        if (maskL > maxL) {
          maskL = maxL;
        }
        if (maskT > maxT) {
          maskT = maxT;
        }
        maskObj.style.left = maskL + "px";
        maskObj.style.top = maskT + "px";
        // console.log(maskObj.style.left,maskObj.style.top);
        let imaPosL = bigObj.offsetWidth - bimg.offsetWidth;
        let imaPosT = bigObj.offsetHeight - bimg.offsetHeight;
        console.log(imaPosL, imaPosT);
        let imgPosL = (maskL / maxL) * imaPosL;
        let imgPosT = (maskT / maxT) * imaPosT;

        bimg.style.left = imgPosL + "px";
        bimg.style.top = imgPosT + "px";
      };